<template>
    <div>
        <!--搜索框-->
        <div v-if="currentPanel == 'first'">
            <el-card class="box-card">
                <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
                    <el-form-item>
                        <el-input v-model="queryData.name" placeholder="搜索活动名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="queryData.activityInstanceStatus" placeholder="请选择活动状态">
                            <el-option
                                    v-for="item in status"
                                    :key="item.activityInstanceStatus"
                                    :label="item.activityInstanceStatus"
                                    :value="item.activityInstanceStatus"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="queryData.data"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="活动开始日期"
                                end-placeholder="活动结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" @click="query">查询</el-button>
                        <el-button size="small" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-card>
            <div class="interspaceH"></div>
            <!--table-->
            <div>
                <el-card class="box-card">
                    <el-button type="primary" @click="currentHandler('firstAdd')">+ 创建活动</el-button>
                    <div class="interspaceH"></div>
                    <!--                    <el-table
                                                :data="tableData"
                                                style="width: 100%">-->
                    <el-table @selection-change="tableRowChange" :data="tableData"
                              :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="活动标题"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="活动时间"
                                width="320">
                        </el-table-column>
                        <el-table-column
                                prop="activityInstanceStatus"
                                label="活动状态">
                        </el-table-column>
                        <el-table-column
                                prop="prizesName"
                                label="活动奖品">
                        </el-table-column>
                        <el-table-column
                                prop="lotteryRulesPerday"
                                label="抽奖次数">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button @click="detailHandle(scope.row)" type="text" size="small">推广</el-button>
                                <!--                                <el-button @click="tiaozhuan" type="text" size="small">统计</el-button>-->
                                <el-button @click="publish(scope.row)" type="text" size="small">发布</el-button>
<!--                                <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>-->
                                <!--                                <el-button @click="detailHandle(scope.row)" type="text" size="small">更多</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </el-card>
                <div>
                    <el-dialog :title="title" :visible.sync="updates" width="30%" :close-on-click-modal="false">
                        <el-form label-width="120px" :model="formData" ref="editForm">
                            <el-form-item label="活动标题" prop="name">
                                <el-input size="small" v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动时间" prop="data">
                                <el-date-picker
                                        v-model="formData.data"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        align="right">
                                </el-date-picker>
                            </el-form-item>
<!--                            <el-form-item label="活动状态" prop="status">
                                <el-select v-model="formData.status" placeholder="请选择活动状态">
                                    <el-option label="进行中" value="进行中"></el-option>
                                    <el-option label="未发布" value="未发布"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动奖品" prop="jiangpin">
                                <el-input size="small" v-model="formData.jiangpin"></el-input>
                            </el-form-item>
                            <el-form-item label="抽奖次数" prop="cishu">
                                <el-input size="small" v-model="formData.cishu"></el-input>
                            </el-form-item>-->
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="small" @click="quxiao">取消</el-button>
                            <el-button size="small" type="primary" class="title" @click="submitForm">保存
                            </el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <el-dialog title="推广" :visible.sync="tuiguang" width="30%" :close-on-click-modal="false">
                <el-form ref="form" :model="table" label-width="90px">
                    <el-form-item>
                        <el-button size="small" class="title" @click="xiazai(table.activityDimensional)">下载二维码
                        </el-button>
                        <el-button size="small" @click="fuzhi(table.activityDrawURL)">复制链接</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div v-if="currentPanel == 'firstAdd'">
            <firstAdd @currentHandler=currentHandler></firstAdd>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"

import firstAdd from "@/views/masket/wheel/first_add";

export default {
    name: "first",
    components: {
        Pagination,
        firstAdd
    },
    data() {
        return {
            currentPanel: 'first',
            queryData: {},
            tuiguang: false,
            startTime: '',
            endTime: '',
            status: [
                {
                    activityInstanceStatus: '未开始',
                    name: '未开始',
                },
                {
                    activityInstanceStatus: '已开始',
                    name: '已开始',
                },
                {
                    activityInstanceStatus: '已结束',
                    name: '已结束',
                },
            ],
            table: {},
            formData: {
                name: '',
                date: '',
                status: '',
                jiangpin: '',
                cishu: ''
            },
            updates: false,
            title: '编辑',
            tableData: [],
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },

            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.queryDataHandle(1, 10);
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let payload = {
                pageNum: page,
                pageSize: row
            }
            let that = this
            that.$request("/api/wheel/getlucyDraw/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        edit(row) {
            this.formData = row
            this.updates = true

        },

        query() {
            if (this.queryData.data != null){
                this.startTime = this.queryData.data[0],
                this.endTime = this.queryData.data[1]
            }
            var ActivityInstance = {
                name: this.queryData.name,
                activityInstanceStatus: this.queryData.activityInstanceStatus,
                startTime: this.startTime,
                endTime: this.endTime

            }
            let that = this
            that.$request("/api/wheel/getlucyDraw/1_0", ActivityInstance, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        resetQuery() {
            this.queryData = {}
            this.queryDataHandle(1, 10);
        },
        //新建活码跳转
        currentHandler(type) {
            this.currentPanel = type
            this.queryDataHandle(1, 10);
        },
        fuzhi(data) {
            let url = data;
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: '复制成功！',
                type: 'success'
            });
            oInput.remove()
        },
        xiazai(url) {
            this.$requestFile("/api/wheel/downloadFile/1_0", {accessoriesAddress: url}, "活动实例.gif")
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        detailHandle(row) {
            this.table = row
            this.tuiguang = true

        },
        submitForm() {
            this.$message({
                message: '修改成功',
                type: 'success'
            })
            this.quxiao
        },
        quxiao() {
            this.updates = false
        },
        tiaozhuan() {
            this.tabCurrent = this.fourth
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
        publish(row) {
            let that = this
            this.$request("/api/wheel/publish/1_0", row, "POST").then((data) => {
                let result = data.message

                if ("活动尚未开始" == result || "活动已经结束" == result || "不可重复发布" == result) {
                    that.$message({
                        message: result,
                        type: 'info'
                    });
                    return;
                }
                that.$message({
                    message: result,
                    type: 'success'
                });
                that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize);
            })
        }
    }
}
</script>

<style scoped>
.interspaceH {
    height: 30px;
}
</style>
